<template>
    <h1>姓名：{{obj.name}}</h1>
    <h1>年龄：{{obj.age}}</h1>
    <h1>产品: {{ obj.taobao }}</h1>
    <h1>深层次：{{ obj.pro.a.b[0] }}</h1>
    <hr>
    <button @click="btn">点击更新视图层</button>
 </template>
 <script>
 import {reactive} from 'vue'//组合式API
 export default({
     setup(){
         const name = '马云'
         const age = 50
         const taobao = '淘宝'
         const pro = {a:{b:['我是深层次的数据']}}
         //对象类型
         const obj = reactive({
            taobao,
            name,
            age,
            pro
         })
         //深层次数据
 
         function btn(){
            obj.name = '马化腾'
            obj.age = 40
            obj.pro.a.b[0] = '我已经被改了'
        
         }
         return{
            btn,obj
         }
     }
 })
 </script>
 <style>
 </style>